<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Todolist</title>
  <script src="vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- v-model数据双向绑定 -->
    <input type="text" v-model="inputVal">
    <button v-on:click="btnClick">提交</button>
    <ul>
      <li v-for="item in List">{{item}}</li>
    </ul>
  </div>

  <script>
    // 数据双向绑定：
    // 改变app.$data.inputVal的值 input框的值也会变。反之同理
    var app = new Vue({
      el:'#app',
      data: {
        List: [],
        inputVal: ''
      },
      methods: {
        btnClick: function() {
          // alert('hhhh');
          this.List.push(this.inputVal); // 将input的值添加到list数组
          this.inputVal = ''; // 添加完后，将input内容清空，以便再次书写内容
        }
      }
    });
    
  </script>

</body>
</html>